<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <link href="https://unpkg.com/element-ui/lib/theme-chalk/index.css" rel="stylesheet">
    <title>家畜管理</title>
</head>
<body>
<div id="app">
    <el-menu class="el-menu-demo" mode="horizontal" @select="handleSelect">
        <el-menu-item index="1">
            <svg t="1711978012908" class="icon" viewBox="0 0 1024 1024" version="1.1"
                 xmlns="http://www.w3.org/2000/svg" p-id="7058" width="30" height="30">
                <path
                        d="M862.485 481.154H234.126l203.3-203.3c12.497-12.497 12.497-32.758 0-45.255s-32.758-12.497-45.255 0L135.397 489.373c-12.497 12.497-12.497 32.758 0 45.254l256.774 256.775c6.249 6.248 14.438 9.372 22.627 9.372s16.379-3.124 22.627-9.372c12.497-12.497 12.497-32.759 0-45.255l-203.3-203.301h628.36c17.036 0 30.846-13.81 30.846-30.846s-13.81-30.846-30.846-30.846z"
                        fill="#707070" p-id="7059"></path>
            </svg>
        </el-menu-item>
        <!-- <el-menu-item index="2">
            <svg t="1711977776835" class="icon" viewBox="0 0 1029 1024" version="1.1"
                xmlns="http://www.w3.org/2000/svg" p-id="6084" width="30" height="30">
                <path
                    d="M1001.423238 494.592q21.504 20.48 22.528 45.056t-16.384 40.96q-19.456 17.408-45.056 16.384t-40.96-14.336q-5.12-4.096-31.232-28.672t-62.464-58.88-77.824-73.728-78.336-74.24-63.488-60.416-33.792-31.744q-32.768-29.696-64.512-28.672t-62.464 28.672q-10.24 9.216-38.4 35.328t-65.024 60.928-77.824 72.704-75.776 70.656-59.904 55.808-30.208 27.136q-15.36 12.288-40.96 13.312t-44.032-15.36q-20.48-18.432-19.456-44.544t17.408-41.472q6.144-6.144 37.888-35.84t75.776-70.656 94.72-88.064 94.208-88.064 74.752-70.144 36.352-34.304q38.912-37.888 83.968-38.4t76.8 30.208q6.144 5.12 25.6 24.064t47.616 46.08 62.976 60.928 70.656 68.096 70.144 68.096 62.976 60.928 48.128 46.592zM447.439238 346.112q25.6-23.552 61.44-25.088t64.512 25.088q3.072 3.072 18.432 17.408l38.912 35.84q22.528 21.504 50.688 48.128t57.856 53.248q68.608 63.488 153.6 142.336l0 194.56q0 22.528-16.896 39.936t-45.568 18.432l-193.536 0 0-158.72q0-33.792-31.744-33.792l-195.584 0q-17.408 0-24.064 10.24t-6.656 23.552q0 6.144-0.512 31.232t-0.512 53.76l0 73.728-187.392 0q-29.696 0-47.104-13.312t-17.408-37.888l0-203.776q83.968-76.8 152.576-139.264 28.672-26.624 57.344-52.736t52.224-47.616 39.424-36.352 19.968-18.944z"
                    p-id="6085"></path>
            </svg>
        </el-menu-item> -->
        <el-menu-item index="3">
            <svg t="1711977480501" class="icon" viewBox="0 0 1024 1024" version="1.1"
                 xmlns="http://www.w3.org/2000/svg" p-id="4255" width="30" height="30">
                <path
                        d="M853.333333 768.064A426.112 426.112 0 0 1 512 938.666667C276.352 938.666667 85.333333 747.648 85.333333 512S276.352 85.333333 512 85.333333s426.666667 191.018667 426.666667 426.666667a21.333333 21.333333 0 0 1-42.666667 0c0-212.074667-171.925333-384-384-384S128 299.925333 128 512s171.925333 384 384 384a383.573333 383.573333 0 0 0 319.36-170.666667h-84.757333A21.248 21.248 0 0 1 725.333333 704c0-11.776 9.664-21.333333 21.269334-21.333333h128.128c5.866667 0 11.178667 2.346667 15.018666 6.186666l0.021334 0.106667c3.84 3.882667 6.229333 9.173333 6.229333 14.976v128.128c0 11.733333-9.472 21.269333-21.333333 21.269333-11.776 0-21.333333-9.664-21.333334-21.269333v-64z"
                        fill="#3D3D3D" p-id="4256"></path>
            </svg>
        </el-menu-item>
    </el-menu>
    <!-- 展示表格 -->
    <div class="block">
        <el-table :data="livestockList">
            <!-- 表格列 -->
            <el-table-column prop="type" label="家畜种类"></el-table-column>
            <el-table-column label="展示">
                <template slot-scope="scope">
                    <img :src="scope.row.img" alt="" width="150px">
                </template>
            </el-table-column>
            <el-table-column prop="number" label="家畜数量"></el-table-column>
            <!-- 其他表格列 -->
        </el-table>
    </div>
</div>
</body>
<script src="https://unpkg.com/vue@2/dist/vue.js"></script>
<script src="https://unpkg.com/element-ui/lib/index.js"></script>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/echarts/5.0.2/echarts.min.js"></script>
<script>
    new Vue({
        el: '#app',
        data: function () {
            return {
                token: null,
                householdId: null,
                livestockList: [],
                addDialogVisible: false,
                updateDialogVisible: false,
                livestock: {
                    id: null,
                    type: null,
                    number: null,
                    household: null,
                    img: null,
                }
            }
        },
        mounted() {
            this.recordToken();
        },
        methods: {
            //获取token
            recordToken() {
                this.token = localStorage.getItem('token');
                this.getHouseholdId();
            },

            //获取村户id
            getHouseholdId() {
                // 使用 window.location 获取当前页面的 URL
                var params = new URLSearchParams(window.location.search);
                // 获取参数 'id'
                this.householdId = params.get('id');
                this.getLivestockByHousehold();
            },

            //根据村民id查询其家畜信息
            getLivestockByHousehold() {
                try {
                    const url = "http://localhost:8080/livestock/?id=" + this.householdId;
                    const response = axios.get(url, {
                        headers: {
                            'token': this.token
                        },
                    }).then(
                        response => {
                            const responseData = response.data;
                            this.livestockList = responseData.data;
                        });
                } catch (error) {
                    console.error('获取家畜信息失败', error);
                }
            },

            //导航栏跳转方法
            handleSelect(index) {
                switch (index) {
                    case '1':
                        // 返回上一级
                        history.back();
                        break;
                    case '2':
                        // 返回主页面
                        this.$router.push('/adminHome');
                        break;
                    case '3':
                        // 刷新页面
                        location.reload();
                        break;
                    default:
                        break;
                }
            },

            //打开新增家畜弹出层
            showAddDialog() {
                this.addDialogVisible = true;
            },

            //关闭新增家畜弹出层
            closeAddDialog() {
                this.addDialogVisible = false;
            },

            //打开修改家畜弹出层
            showUpdateDialog(id) {
                //查询村户信息
                this.getHouseholdById(id);
                this.updateDialogVisible = true;
            },

            //关闭家畜村户弹出层
            closeUpdateDialog() {
                this.updateDialogVisible = false;
            },

            //根据id查询家畜信息
            getHouseholdById(id) {
                try {
                    const url = "http://localhost:8080/account/" + id;
                    const response = axios.get(url, {
                        headers: {
                            'token': this.token
                        },
                    }).then(
                        response => {
                            const responseData = response.data;
                            this.household = responseData.data;
                        });
                } catch (error) {
                    console.error('获取指定村户信息失败', error);
                }
            },

            //新增家畜
            addHousehold() {
                if (this.household.name == null || this.household.holder == null || this.household.members == null || this
                    .household.field == null || this.household.password == null) {
                    this.$message({
                        showClose: true,
                        message: '请填写必要信息',
                        type: 'warning'
                    });
                } else {
                    try {
                        axios.post('http://localhost:8080/account/addHousehold', this.household, {
                            headers: {
                                'token': this.token
                            },
                        }).then(response => {
                            this.$message({
                                showClose: true,
                                message: "添加村户成功！",
                                type: 'success'
                            });
                            // 刷新当前页面
                            location.reload();
                        });
                    } catch (error) {
                        console.error('登录失败：', error);
                    }
                }
            },

            //修改家畜信息
            updateHousehold() {
                try {
                    axios.put('http://localhost:8080/account', this.household, {
                        headers: {
                            'token': this.token
                        },
                    }).then(response => {
                        this.$message({
                            showClose: true,
                            message: "修改村户信息成功！",
                            type: 'success'
                        });
                        // 刷新当前页面
                        location.reload();
                    });
                } catch (error) {
                    console.error('登录失败：', error);
                }
            },

            //删除家畜信息
            deleteHousehold(id) {
                this.$confirm('该村户信息将被删除, 是否继续?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    try {
                        try {
                            axios.delete('http://localhost:8080/account/' + id, {
                                headers: {
                                    'token': this.token
                                },
                            }).then(response => {
                                this.$message({
                                    showClose: true,
                                    message: "删除村户信息成功！",
                                    type: 'success'
                                });
                                // 刷新当前页面
                                location.reload();
                            });
                        } catch (error) {
                            console.error('删除村户失败：', error);
                        }
                    } catch (error) {
                        console.error('删除接口调用失败：', error);
                    }
                }).catch(() => {
                    this.$message({
                        type: 'info',
                        message: '已取消删除'
                    });
                });
            },
        }
    })
</script>
</html>